<template>
	<view class="content">
		<view>
			<image style="width: 750upx;height: 1300upx;" src="../../static/h5.png"></image>
			<image :src="url" class="images"></image>
			</view>
		<view class="text-area">
			<!-- <view class="text-areas" @click="previewOpen(url)">保存图片</view> -->
			<view class="text-areas" @click="save(url)">保存图片</view>
			<previewImage ref="previewImage" :opacity="0.8" :circular="true" :imgs="imgs" :descs="descs" @longPress="longPress(url)"></previewImage>
		</view>
	</view>
</template>

<script>
import previewImage from '@/components/kxj-previewImage/kxj-previewImage.vue'; //引用插件
var _this;
export default {
	components: { previewImage }, //注册插件
	data() {
		return {
			url:'',
			descs:[],
			imgs:[],
		};
	},
	onLoad() {
		this.user_poster_api()
	},
	methods: {
		//长按事件
		longPress(data) {
			console.log('========',data);
			uni.showModal({
				showCancel: false,
				title: '长按事件',
				content: '已触发长按事件,你可以在这里做更多',
				success: showResult => {
					
				}
			});
		},
		baocun() {
			var that = this
			console.log('that.url',that.url)
			uni.downloadFile({
				url: that.url,
				success: (res) =>{
					if (res.statusCode === 200){
						console.log('res.tempFilePath',res)
						that.save()
						// uni.saveImageToPhotosAlbum({
						// 	filePath: res.tempFilePath,
						// 	success: function(eee) {
						// 		console.log('eee',eee,path)
								
						// 		uni.showToast({
						// 			title: "保存成功",
						// 			icon: "none"
						// 		});
						// 	},
						// 	fail: function(e) {
						// 		uni.showToast({
						// 			title: "保存失败"+e,
						// 			icon: "none"
						// 		});
						// 	}
						// });
					}else{
						uni.showToast({
							title: res.statusCode,
							icon: "none"
						});
					}
				}
			})
		},
		save() {
			console.log('url:',this.url);
			uni.downloadFile({
				url: this.url,
				success: (res) =>{
					if (res.statusCode === 200){
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: function() {
								uni.showToast({
									title: "保存成功",
									duration: 2000
								});
							},
							fail: function() {
								uni.showToast({
									title: "保存失败，请稍后重试",
									icon: "none"
								});
							}
						});
					}
				}
			})
		},
		user_poster_api() {
			var that = this
			that.$request(that.$Api.user_poster_api, {
				access_token:uni.getStorageSync('access_token'),
			},"POST").then(res => {
				if( res.data.code == 0 ){
					that.url = res.data.data.url
					// that.url = 'https://hyjjl.carryba.com/addons/zjhj_mall/core/web/index.php?r=code/code&code=https%3A%2F%2Fhyjjl.carryba.com%2Fh5%2F%23%2F%3Ftoken%3D256469.png'
					var arr = [res.data.data.url]
					that.imgs = arr
				}else{
					uni.showToast({
						title: res.data.msg,
						duration: 2000,
						icon: 'none'
					});
				}
			})
		},
		//打开预览e
		previewOpen(e) {
			console.log('eee',e)
			var param = e;
			console.log(param);

			this.$refs.previewImage.open(param); // 传入当前选中的图片地址或序号
			return; //如需测试和uni原生预览差别可注释这两行

			//以下是效果对比相关
			var _this = this;
			uni.showModal({
				title: '请选择',
				content: '请选择使用uni原生图片预览或非原生自定义的图片预览。',
				cancelText: 'uni',
				confirmText: '自定义',
				success: function(res) {
					if (res.confirm) {
						_this.$refs.previewImage.open(param); // 传入当前选中的图片地址或序号
					} else if (res.cancel) {
						uni.previewImage({
							current: param,
							urls: _this.imgs
						});
					}
				}
			});
		},
	}
};
</script>

<style>
	.images{
		width: 450upx;
		height: 450upx;
		z-index: 2;
		position: relative;
		top: -772upx;
		margin-left: 150upx;
	}
.text-area {
	position: fixed;
	bottom: 30upx;
	width: 100%;
	display: flex;
	justify-content: center;
}
.text-areas{
	width: 300upx;
	height: 80upx;
	text-align: center;
	line-height: 80upx;
	border-radius: 60upx;
	font-size: 28upx;
	color: #fff;
	background: #333;
}

.title {
	font-size: 26rpx;
	color: #999999;
}
image {
	width: 750rpx;
}
</style>
